<template>
    <div class="" style="background-color: #333742;">
        <div v-if="loading"
             class="loader-wrapper">
            <pulse-loader></pulse-loader>
        </div>

        <div class="container main-container has-text-white">

          <div class="columns">
            <div class="column is-8">

              <div class="title has-text-white"> 分红详情 </div>

              <div class="columns is-multiline has-text-white">
                <a class="column is-3" href="https://shimo.im/docs/sFyvwGYWxowPUGNZ/" target="_blank">
                  <div class="card has-text-white">
                    <div class="is-size-5 has-text-weight-bold"> 第四轮(30000 BIT)</div>
                    <div class="has-text-grey-light is-small"> 股东专属空投 </div>
                  </div>
                </a>

                <a class="column is-3" href="https://shimo.im/docs/sFyvwGYWxowPUGNZ/" target="_blank">
                  <div class="card has-text-white">
                    <div class="is-size-5 has-text-weight-bold"> 第三轮(10EOS)</div>
                    <div class="has-text-grey-light is-small"> 游戏推广收入 </div>
                  </div>
                </a>

                <a class="column is-3" href="https://shimo.im/docs/sFyvwGYWxowPUGNZ/" target="_blank">
                  <div class="card has-text-white">
                    <div class="is-size-5 has-text-weight-bold"> 第二轮(5EOS)</div>
                    <div class="has-text-grey-light is-small"> 快神话收入分红 </div>
                  </div>
                </a>

                <a class="column is-3" href="https://shimo.im/docs/sFyvwGYWxowPUGNZ/" target="_blank">
                  <div class="card has-text-white">
                    <div class="is-size-5 has-text-weight-bold"> 第一轮(5EOS)</div>
                    <div class="has-text-grey-light is-small"> 快西游收入分红 </div>
                  </div>
                </a>
              </div>

            </div>

            <div class="column is-4">
              <RightAd> </RightAd>
            </div>
          </div>
        </div>
        </div>
    </div>
</template>

<script>
    import PulseLoader from 'vue-spinner/src/PulseLoader';
    import API, { eos, currentEOSAccount } from '@/util/api';
    import RightAd from '@/components/RightAd';

    export default {
        name: 'index',
        components: {
            PulseLoader,
          RightAd
        },

        data() {
            return {
                tokenPrice: [],
                news_list: [],
                loading: true,
            };
        },

        computed: {},

        async created() {
          this.news_list = await API.getNewsList();
          this.updateNews();
          this.loading = false;
        },

        methods: {
          timestampToStr(timestamp) {
              timestamp += 8*60*60;
              var result = new Date(parseInt(timestamp) * 1000).toISOString().replace('T', ' ').slice(10,16);
              return result;
          },
          async updateNews() {
            function sleep(ms) {
              return new Promise(resolve => setTimeout(resolve, ms));
            }
            for (var i=0;i<1000;i++) {
              await sleep(5000);
              this.news_list = await API.getNewsList();
            }
          }
        },
        watch: {},
    };
</script>
<style scoped>
    .loader-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .main-container {
      padding-top: 1rem;
      background-color: #333742;
    }
    .card {
        border:0.5px solid grey;
        border-radius: 2px;
        padding: 10px;
        background-color: #333742;
    }
    pre {
      padding: 0.1rem;
    }
</style>
